import React from 'react'
import { useDispatch, useSelector } from "react-redux";

import { incrementAction, decrementAction, waitIncrementAction } from '../../store/actions/countAction';

/* 
  react-redux提供了两个hook 用来操作redux
    - useDispatch() 得到一个dispatch方法
    - useSelector() 参数是一个回调函数,回调函数的形参就是store中的数据

*/
export default function Count() {
  //useDispatch()得到一个方法
  const dispacth = useDispatch()
  console.log(dispacth);
  
  /*- useSelector() 参数是一个回调函数,
  回调函数的 形参 就是store中的数据*/
//return谁拿到谁 count
  const count = useSelector((state) => {
    // console.log(state, "state");
    return state.count.count;
  })

  const movieList = useSelector(state => state.movie.movieList)

  const incrementHandle = () => {
    dispacth(incrementAction(1))
  }

  const decreamentHandle = () => {
    dispacth(decrementAction(1))
  }

  const ifOddDecrementHandle = () => {
    if (count % 2 !== 0) {
      dispacth(incrementAction(1))
    }
  }

  const waitDecrementHandle = () => {
    dispacth(waitIncrementAction(1))
  }



  return (
    <div>
      <h1>我是Count组件 我的值是{count}</h1>
      <h2>当前的电影总是数 {movieList.length}</h2>
      <div>
        <button onClick={incrementHandle}>累加</button>
        <button onClick={decreamentHandle}>累减</button>
        <button onClick={ifOddDecrementHandle}>如果是奇数再加1</button>
        <button onClick={waitDecrementHandle}>等2s再加1</button>
      </div>

    </div>
  )
}
